<template>
	<view class="box">
		<u-navbar title-color="#fff" :borderBottom="false" title="蜂钻"
              titleColor="#FFFFFF" titleSize="32" backIconSize="40" back-icon-color="#ffffff"
		          :background="background">
    </u-navbar>
		<view class="top">
			<view class="down">
				<view class="list">
          <view class="name">
            <image src="../../../static/image/u8.png" mode=""></image>
            <text>蜂钻总额(Fdo)</text>
          </view>
					<view class="number">
            {{ total }}
					</view>
				</view>
			</view>
		</view>
		<view class="content">
      <view class="tabs">
        <view class="tab-item" v-for="(item,index) in tabList" :key="index"
              @click="handleTab(index)"
              :style="index === 0 ?'background-color: #3476FE;':'background-color: #29D09D;'">
          <image class="icon" :src="item.image"></image>
          <text>{{ item.title }}</text>
        </view>
      </view>
			<view class="down">
        <view class="title">中奖记录</view>
        <view v-if="!recordList.length" class="default-page">
          <image class="img" src="/static/image/none.png"></image>
          <view>暂无中奖记录</view>
        </view>
        <view v-else class="item" v-for="item in recordList" :key="item.pid">
          <view class="left">
            <image class="picture" :src="img_pre + item.manor_icon"></image>
          </view>
          <view class="center">
            <view class="text"><text class="title">蜂巢&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ID</text> {{item.pid}}</view>
            <view class="pierce"><text class="title">蜂巢价值</text> {{item.final_price}}<text class="company">Fmb</text></view>
            <view class="date">{{item.win_price_goods_sign_time}}</view>
          </view>
          <view class="right">
            <text class="number">+{{ item.dob_number }}</text>Fdo
          </view>
        </view>
      </view>
		</view>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				background: {
					'background': '#3476FE'
				},
        tabList: [
          {image:'../static/detailed.png',title:'明细查看'},
          {image:'../static/shop.png',title:'蜂钻商城'}
        ],
        total: 0,
        recordList: [],
        page: 1,
				list1: [{
					name: '鞋履专区'
				}, {
					name: '男女箱包'
				}, {
					name: '数码家电'
				}, {
					name: '家居建材'
				}, {
					name: '化妆品'
				}, {
					name: '益智玩具'
				}],
				current: 0,
			}
		},
		onLoad(option) {
			than = this;
		},
    onShow() {
      than.page = 1
		  than.getDob()
    },
		methods: {
		  /**
       * 获取页面内容
       */
      getDob() {
        than.post("api/dob/dobIndex", {
          page: than.page
        }, function(data) {
          const { fengzuan, list } = data
          than.total = fengzuan
          than.recordList = list
        })
      },
			change(index) {
				than.current = index;
				uni.pageScrollTo({
					scrollTop:0,
					duration: 0
				});
				const query = uni.createSelectorQuery().in(this);
				query.select('#a' + index).boundingClientRect(data => {
					uni.pageScrollTo({
						scrollTop:data.top-100,
						duration: 300
					});

				}).exec();
			},
      /** tab切换
       * @param index
       */
      handleTab(index) {
			  switch (index) {
			    case 0:
            than.toPage('remain')
          break;
          case 1:
            than.toPage('/pages/htmlI/store/index')
          break;
        }
      }
		},
    onReachBottom() {
		  than.page ++
      than.getDob()
    },
	}
</script>

<style lang="less" scoped>
  .box {
    background-color: #FAFAFA;
    min-height: 100vh;
  }
  .default-page {
    margin-top: 40rpx;
    font-size: 26rpx;
    color: #BDC3D3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .img {
      width: 226.4rpx;
      height: 213.7rpx;
    }
  }
	.content {
		margin-top: -100rpx;

		.tabs {
      padding-top: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
			border-radius: 70rpx 0px 0px 0px;
			background: #FAFAFA;
      .tab-item {
        width: 327rpx;
        height: 125rpx;
        border-right: 20rpx;
        font-size: 32rpx;
        color: #FFFFFF;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon {
          width: 36rpx;
          height: 36rpx;
          margin-right: 24rpx;
        }
      }
		}

		.down {
			padding: 64rpx 35rpx 0 37rpx;
      .title {
        color: #333333;
        font-size: 36rpx;
        font-weight: bold;
      }
      .item {
        width: 100%;
        height: 180rpx;
        border-radius: 20rpx;
        margin-top: 20rpx;
        background-color: #FFFFFF;
        padding: 34rpx 24rpx 34rpx 22rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          justify-content: center;
          .picture {
            width: 77rpx;
            height: 77rpx;
            border-radius: 50%;
          }
        }
        .center {
          flex: 1;
          padding-left: 13rpx;
          .text {
            font-size: 28rpx;
            color: #4A5062;
            .title {
              width: 118px;
              height: 28px;
              font-size: 30rpx;
              color: #666666;
              margin-right: 21rpx;
            }
          }
          .pierce {
            font-size: 36rpx;
            color: #FB683D;
            .title {
              width: 118px;
              height: 28px;
              font-size: 30rpx;
              color: #666666;
              margin-right: 21rpx;
            }
            .company {
              margin-left: 7rpx;
              font-size: 28rpx;
            }
          }
          .date {
            font-size: 24rpx;
            color: #8B93A2;
          }
        }
        .right {
          font-size: 32rpx;
          color: #F66337;
          .number {
            font-size: 36rpx;
          }
        }
      }
		}
	}

	.top {
		background: #3476FE;
		padding-top: 100rpx;
		color: #E1C9AF;
		height: 600rpx;
		margin-top: -100rpx;

		.down {
      margin-top: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.long {
				width: 2rpx;
				height: 120rpx;
				background: rgba(99, 93, 88, 0.8);
			}

			.list {
				width: 50%;
				text-align: center;

				.name {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
          color: #BFD6FF;
					font-family: PingFang SC;
					font-weight: bold;

					image {
						margin-right: 16rpx;
						width: 50rpx;
						height: 50rpx;
					}
				}

				.number {
          margin-top: 20rpx;
					font-size: 72rpx;
					color: #FFFFFF;
				}
			}
		}

		.up {
			padding: 0 38rpx;
			height: 180rpx;
			display: flex;
			align-items: center;

			.name {
				font-size: 56rpx;
				font-family: PingFang SC;
				font-weight: bold;
			}

			.icon {
				margin-left: auto;
				display: flex;
				align-items: center;

				.list {
					text-align: center;
					margin-left: 35rpx;

					image {
						width: 64rpx;
						height: 64rpx;
					}

					.name {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>
